const app = getApp()
const img = '../../images/location.png'

Page({
  data: {
    // 121.4602665192848 31.14504387538385
    latitude: 31.14504387538385,
    longitude: 121.4602665192848,
    activeTab: 0,
    activeType: 2,
    menuList: [
      {
        name: '游乐介绍',
        url: '../../images/map-tab1.png'
      },
      {
        name: '寻找秘宝',
        url: '../../images/map-tab2.png'
      },
      {
        name: '演出介绍',
        url: '../../images/map-tab3.png'
      },
      {
        name: '主题商店',
        url: '../../images/map-tab4.png'
      },
      {
        name: '主题餐饮',
        url: '../../images/map-tab5.png'
      },
    ],
    mapList: [],
    markers: [],
    curMarker: {},
    local: false
  },
  onLoad(options) {
    try {
      this.mapCtx = wx.createMapContext('mapId')
    } catch (err) {
      console.log(err)
    }
  },

  getMapList(type) {
    console.log(type)
    let _this = this
    wx.request({
      url: 'https://forestart.top/api/book/greatLine/greatLineInfo', // 接口地址
      method: 'GET', // 请求方法
      data: {
        type: type
      },
      header: {
      'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data); // 请求成功后的回调函数
        let list = res.data.result
        _this.setData({
          mapList: list
        })
        _this.setData({
          markers: list.map((el, index) => {
            return {
              id: index,
              longitude: el.lon,
              latitude: el.lat,
              iconPath: '../../images/none.png',
              width: 1,
              height: 1,
              callout: {
                content: el.name,
                color: '#3153FF', //文本颜色
                borderRadius: 6, //边框圆角
                borderWidth: 2, //边框宽度
                borderColor: '#3153FF',//边框颜色
                bgColor: '#FFFFFF', //背景色
                padding: 5, //文本边缘留白
                textAlign: 'center', //文本对齐方式。有效值:left，right，center
                fontSize: 12,
                fontWeight: 700,
                fontFamily: 'DingTalk JinBuTi',
                display: 'ALWAYS'
              }
            }
          })
        })
      },
      fail() {
        console.error('请求失败'); // 请求失败后的回调函数
      }
    });
  },

  goDetail(item) {
    console.log(item)
    let query = JSON.stringify(item.currentTarget.dataset.item)
    wx.navigateTo({
      url: `/pages/grandLine/grandLine/detail?query=${query}`
    })
  },

  onShow () {
    const _this = this
    let query = wx.getStorageSync('query')
    console.log('wssss', query)
    if (query) {
      _this.setData({
        activeTab: +query
      })
      _this.getMapList(+query)
      wx.setStorageSync('query', null)
    } else {
      _this.getMapList(0)
    }
    this.setImg()
  },

  onReady: function () {
    
  },

  setImg () {
    this.mapCtx.addGroundOverlay({
      id: 1,
      src: 'https://hanghaiwang.oss-cn-shanghai.aliyuncs.com/wechat/map.png',
      bounds: {
        // 西南角
        southwest: {
          // 121.4592977226389 31.144150251384396
            // 西南角的经度
            longitude: 121.4592977226389, 
            // 西南角的纬度
            latitude: 31.144150251384396
        },
        // 东北角
        northeast: {
            // 东北角的经度
            longitude: 121.46118812725365, 
            // 东北角的纬度
            latitude: 31.145983099401025
        },
      },
      opacity: 0.8,  // 透明度
      success: (res) => {
        console.log('wp', res)
      },
      fail: (err) => {
        console.log('wperr', err)
      },
      complete: (e) => {
        console.log(e)
      }
    })
  },

  handleClick(e) {
    console.log(e)
    // this.activeTab = e.currentTarget.dataset.idtype
    this.setData({
      activeTab: e.currentTarget.dataset.idtype,
      curMarker: {},
      local: false
    })
    this.getMapList(e.currentTarget.dataset.idtype)
  },

  handleClickType(e) {
    console.log(e)
    this.setData({
      activeType: e.currentTarget.dataset.idtype
    })
    this.setImg()
  },

  onTapMap(event) {
    const latitude = event.detail.latitude
    const longitude = event.detail.longitude
    console.log(longitude,latitude)
  },

  //index.js 点击标注点时获取该标注id
  onTapMarker(event) {
    console.log(event.detail.markerId, this.data.markers)
    let markers = [...this.data.markers]
    let curMarker = {}
    console.log(markers)
    markers.forEach((el) => {
      if (el.id === event.detail.markerId) {
        el.callout.bgColor = '#3153FF'
        el.callout.color = '#FFFFFF'
      } else {
        el.callout.bgColor = '#FFFFFF'
        el.callout.color = '#3153FF'
      }
    })
    this.data.mapList.forEach((el, index) => {
      if (event.detail.markerId === index) {
        curMarker = el
      }
    })
    console.log(curMarker)
    this.setData({
      markers: markers,
      curMarker: curMarker,
      local: true
    })
  },

  onCalloutTap(e) {
    console.log('@@ onCalloutTap', e)
  },

  onLabelTap(e) {
    console.log('@@ labletap', e)
  }
})